<template>
	<div class="vue_app rechargeDetail" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'充值记录'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll ref='verticalScroll'>
				<ul v-if="initData" class="aui-list aui-media-list detailed_list">
					<li class="aui-list-item" v-for="val in initData">
						<div class="aui-list-item-inner">
							<span class="aui-list-item-title">{{styletouchBalance(val.userType)}}</span>
							<span class="aui-list-item-title">{{val.createTm | time}}</span>
							<span class="points"><strong class="pointsok">{{val.usedType=='1'?"-":"+"}}</strong>{{val.verificationBalance.toFixed(2)}}</span>
						</div>
					</li>
					<div class="no_data" v-if="initData.length==0 && flag" style="background-color: #F5F5F5;">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无充值数据</p>
					</div>
				</ul>
			</vertical-scroll>
		</div>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest';
	import { showLoading, hideLoading } from "@/utils/loading";
	export default {
		data() {
			return {
				initData: [],
				flag:false
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
			ButtonToTop
		},
		methods: {
			styletouchBalance(state) {
				if(state == 1) {
					return "购物消费"
				} else if(state == 2) {
					return "订单退款"
				} else if(state == 3) {
					return "激活礼品卡"
				}
			},
			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			//获取数据请求
			getrecordata() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/purseVerification/selectPurseVerificationList',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
					params: {
						purseId: this.$route.query.walletid,
						userType: 3
					},
				};
				axios(config).then((res) => {
					hideLoading()
					this.flag = true
					this.initData = res.data.data
				}).catch(err=>{
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			}
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '60';
			}
		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth()+ 1}-${date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		watch: {

		},
		mounted() {
			this.getrecordata()
		},
	}
</script>

<style>
	.rechargeDetail .points {
		font-size: 1rem;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		display: inline-block;
		color: #EF5423;
	}

	.rechargeDetail .pointsok {
		margin-right: 0.5rem;
		color: #EF5423;
	}
</style>
